<template>
    <router-link :to="to" :class="cardStyle.containerStyle" class>
        <div :class="cardStyle.imgContainerStyle" class v-if="hasImage">
            <img :class="cardStyle.imageStyle" class :src="image" />
        </div>
        <div :class="cardStyle.textContainerStyle">
            <div class :class="cardStyle.titleStyle">{{ title }}</div>
            <div :class="cardStyle.contentStyle" v-html="content"></div>
            <div :class="cardStyle.linkStyle">链接 ></div>
        </div>
    </router-link>

</template>
<script lang="ts" setup>
import { defineProps } from "vue";

defineProps({
    cardStyle: {
        type: Object,
        default: {
            containerStyle: '',
            imgContainerStyle: '',
            textContainerStyle: '',
            imageStyle: '',
            contentStyle: '',
            titleStyle: '',
            linkStyle: ''
        }
    },
    to: {
        type: String,
        default: ''
    },
    image: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    content: {
        type: String,
        default: ''
    },
    hasImage: {
        type: Boolean,
        default: true
    },

})

</script>

<style lang="scss" scoped>
.containerStyle {
    flex: 50%;
}
@media screen and (max-width: 768px) {
    .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
@media screen and (min-width: 768px) {
    .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}
</style>